@extends('member')
@section('title'){{$project->project_name}}@endsection
@section('styles')
    <link href="{{asset('static/webuploader/webuploader.css')}}" rel="stylesheet">

    <style type="text/css">
        .box-operate{margin-top: 10px;}
        .box-operate>a,.box-operate>label{display: inline-block;margin-left: 5px;}

        .webuploader-pick{

        }

        .webuploader-container{
            padding: 0;
            border: 0;
            height: 40px;
        }
        .watch-crop-list>ul{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .webuploader-container div{
            width: 77px !important;
            height: 40px !important;
            left: 0 !important;
        }

        #error-message{
            font-size: 13px;
            color: red;
            vertical-align: middle;
            margin-top: -10px;
            display: inline-block;
            height: 40px;
        }

    </style>
@endsection
@section('scripts')

    <script type="text/javascript">
        function showError($msg) {
            $("#error-message").addClass("error-message").removeClass("success-message").text($msg);
            return false;
        }
        function showSuccess($msg) {
            $("#error-message").addClass("success-message").removeClass("error-message").text($msg);
            return true;
        }

        $(function () {

            $("#btn-add-axure").on("click", function(){
                $("#edit-axure-panel").modal('show');
                $("#myModalLabel").text("新增原型");
                $("#axure-id").val("");
                $("#mode-local").trigger("click");
            });

            $("#edit-axure-panel").on('click','#mode-local',function () {
                $("#local-panel").show();
                $("#remote-panel").hide();
            }).on('click','#mode-remote',function () {
                $("#remote-panel").show();
                $("#local-panel").hide();
            });

            $('#edit-axure-panel').on('show.bs.modal', function () {
                $("#axureForm").get(0).reset();
                $(".uploader-list").empty();
                $("#error-message").empty();
                $("#axureForm").find('button[type="submit"]').button('reset');
            });


            //表单提交
            var submitLock = false;
            $("#axureForm").ajaxForm({
                beforeSubmit : function () {
                    if(submitLock){
                        return false;
                    }
                    var name = $.trim($("#name").val());
                    if(!name){
                        return showError("原型名称不能为空");
                    }
                    $("#axureForm").find('button[type="submit"]').button('loading');
                    submitLock = true;
                },
                success : function (res) {

                    if(res.success == 1){
                        showSuccess("保存成功");
                        $("#edit-axure-panel").modal('hide');
                        location.reload();
                    }else{
                        showError(res.message);
                    }
                    $("#axureForm").find('button[type="submit"]').button('reset');
                },
                complete:function(){
                    submitLock = false;
                }
            });

            /**
             * 删除
             */
            $("#axure-list").on("click", ".btn-delete", function(){
               var id = $(this).data("id");
               var name = $(this).data("name");
               var url = this.href;
               Modal.confirm("确定删除《" + name + "》?",
                   {
                       confirm:function(){
                           $.ajax({
                               url:url,
                               success:function(response){
                                   location.reload();
                               }
                           })
                       }
                   });
               return false;
            });

            /**
             * 编辑
             */
            $("#axure-list").on("click", ".btn-edit", function(){
                $("#edit-axure-panel").modal('show');
                var axure = $(this).data();
                $("#myModalLabel").text("编辑原型");
                $("#axure-id").val(axure.id);
                $("#name").val(axure.name);
                $("#url").val(axure.url);
                if(axure.remote == 1){
                    $("#mode-remote").trigger("click");
                }
                else{
                    $("#mode-local").trigger("click");
                }
            });


        });

        //文件上传
        try {

            $("#btn-upload").on("click", function(){
                $("#upload-file").trigger("click");
            });
            $("#upload-file").on("change", function(e){
                var files = e.target.files;
                var file = files[0];
                var fileName = file.name;
                var pos = fileName.lastIndexOf(".");
                var ext = fileName.substr(pos + 1);
                if(ext !="zip" && ext !="rar"){
                    showError("目前只支持zip压缩包");
                    return false;
                }
                fileName = fileName.substr(0, pos);

                $(".uploader-list").html( '<div id="' + file.id + '" class="item">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '</div>' );
                var name = $.trim($("#name").val());
                if(name === ''){
                    $("#name").val(fileName);
                }
            });


        }catch(e){
            console.log(e);
        }


    </script>

@endsection
@section('content')
<div class="project-box">
        <div class="box-head">
            <h4>{{$project->project_name}}-原型管理</h4>
            <label class="btn btn-success btn-sm pull-right"  style="margin-top: 10px;" title="添加原型" data-toggle="modal" id="btn-add-axure">
                添加原型
            </label>
        </div>
        <div class="box-body">
            <div class="error-message">
            </div>
            <div class="project-list" id="axure-list">
                <ul>
                    @foreach($lists as $item)
                        <li>
                            <div>
                                <div class="pull-left">
                                    {{$item->axure_name}}
                                </div>
                                <div class="pull-right">
                                    <a href="{{$item->axure_url}}" title="查看原型" style="font-size: 12px;" data-toggle="tooltip" data-placement="bottom"  target="_blank"><i class="fa fa-eye"></i> 查看</a>
                                    <a class="btn-edit" href="javascript:;" title="编辑" data-toggle="tooltip" data-placement="left" data-name="{{$item->axure_name}}" data-id="{{$item->axure_id}}"  data-remote="{{$item->remote}}" data-url="{{$item->axure_url}}" style="font-size: 12px;"><i class="fa fa-pencil"></i> 编辑</a>
                                    <a href="{{route('axure.delete',['axure_id'=>$item->axure_id])}}" title="删除" data-toggle="tooltip" data-placement="left" data-name="{{$item->axure_name}}" data-id="{{$item->axure_id}}}" class="btn-delete" style="font-size: 12px;"><i class="fa fa-trash-o"></i> 删除</a>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>

    </div>
@if((isset($is_owner) && $is_owner) || $member->group_level === 0)

<!-- Modal -->
<div class="modal fade" id="edit-axure-panel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form role="form" method="post" action="{{route('axure.save',['project_id'=>$project->project_id])}}" id="axureForm">
                <input type="hidden" name="id" id="axure-id" />
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">新增原型</h4>
                </div>
                <div class="modal-body">
                    <div class="wraper">
                        <div class="form-group">
                            <label for="name">名称<strong class="text-danger">*</strong></label>
                            <input type="text" class="form-control" name="name" id="name" max="20" placeholder="原型名称" value="">
                        </div>
                        <div class="form-group">
                            <label for="remote">类型<strong class="text-danger">*</strong></label>
                            <div class="col-sm-12 btn-group" style="padding-left: 0;" data-toggle="buttons" id="project-passwd-buttons">
                                <label class="btn btn-default active"  data-toggle="tooltip" data-placement="auto" id="mode-local" title="本地">
                                    <input type="radio" name="remote"  autocomplete="off" value="0" checked><i class="fa fa-upload"></i>
                                </label>
                                <label class="btn btn-default" title="网络" data-toggle="tooltip" id="mode-remote" data-placement="auto">
                                    <input type="radio" name="remote" autocomplete="off" value="1"><i class="fa fa-link"></i>
                                </label>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="form-group" id="local-panel">
                            <label for="filePicker">原型上传(zip/rar)<strong class="text-danger">*</strong></label>
                            <div class="col-sm-12 btn-group" style="padding-left: 0;">
                                <div class="uploader-list"></div>
                                <div id="filePicker" class="btn webuploader-container">
                                    <div class="webuploader-pick">选择</div>
                                    <div style="position: absolute; top: 0px; left: 0px;overflow: hidden; bottom: auto; right: auto;z-index: 1000;">
                                        <input type="file" name="file" class="webuploader-element-invisible" id="upload-file" style="height: 40px;z-index: 1000;" />
                                        <label id="btn-upload" style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="form-group" id="remote-panel" style="display: none;">
                            <label for="url">原型地址<strong class="text-danger">*</strong></label>
                            <input type="text" class="form-control" name="url" id="url" max="200" placeholder="http://" value="" />
                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <span id="error-message" style="vertical-align: baseline"></span>
                    <button type="submit" class="btn btn-success" data-loading-text="保存中...">立即保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endif
@endsection